<template>
  <view
    style="
      background: linear-gradient(135deg, #0986ff, #abdcff);
      min-height: 100vh;
    "
  >
    <!-- <u-navbar
      :autoBack="true"
      :placeholder="true"
      bgColor="transparent"
      leftIconSize="20"
      title="培训学院"
      titleStyle="color: #fff;"
      leftIconColor="#fff"
    ></u-navbar> -->
    <view class="gf rel" style="height: 15vh; width: 100vw">
      <view class="fs40r abs l5 b30">思行新青</view>
      <view class="fs28r abs l5 b15">随堂测验</view>
    </view>
    <view
      class=""
      style="
        border-radius: 30rpx 30rpx 0 0;
        min-height: 83vh;
        background-color: #f7f8fa;
        padding: 20rpx;
      "
    >
      <view class="f ac mt30r mb30r">
        <view class="f1 f cn ac" @click="go()">
          <view style="width: 18vw; height: 18vw">
            <image
              src="~@/static/pic/yw.png"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view class="mt20r">语文</view>
          <!--          <view class="mt20r" style="width: 7vw;height: 1vw;background-color: #0b3369;visibility: hidden"></view>-->
        </view>
        <view class="f1 f cn ac">
          <view style="width: 18vw; height: 18vw">
            <image
              src="~@/static/pic/sx.png"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view class="mt20r">高数</view>
        </view>
        <view class="f1 f cn ac">
          <view style="width: 18vw; height: 18vw">
            <image
              src="~@/static/pic/yy.png"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view class="mt20r">英语</view>
        </view>
        <view class="f1 f cn ac">
          <view style="width: 18vw; height: 18vw">
            <image
              src="~@/static/pic/xds.png"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view class="mt20r">近现代史</view>
        </view>
      </view>
      <u-collapse :value="[1, 2, 3]">
        <u-collapse-item title="待参加" name="1">
          <view class="mt30r" style="padding: 20rpx">
            <view
              class="rds10r"
              style="min-height: 5vh; background-color: #e9f1fe; padding: 20rpx"
            >
              <view class="b fs35r" style="color: #3676fc">
                语文
              </view>
              <view class="fs24r">语文小测验 允许补考</view>
            </view>
            <view class="mt30r fs26r">测评期限:2024-07-22~2025-07-22</view>
            <view class="mt10r fs26r">测评时长:180分钟</view>
            <u-button
              customStyle="margin-top: 20rpx;min-height:60rpx"
              type="primary"
              text="立即参加"
              size="mini"
            ></u-button>
          </view>
        </u-collapse-item>
        <!-- <u-collapse-item title="品牌培训" name="2">
          <view class="f ac xc" style="min-height: 13vh">暂无数据</view>
        </u-collapse-item> -->
        <u-collapse-item title="历史测评" name="3">
          <view class="w100 rds10r ovh" style="min-height: 5vh">
            <view
              class="rds10r bgf mt30r"
              style="padding: 20rpx"
              v-for="(item, index) in 5"
              :key="index"
            >
              <view class="b">语文小测验</view>
              <view
                style="
                  padding: 5rpx;
                  background-color: #d3e3fd;
                  width: fit-content;
                  color: #7f7f7f;
                "
                class="rds15r fs20r mt10r"
              >
                允许补考
              </view>
              <view class="f ac xb">
                <view class="mt10r fs26r">测评时长:180分钟</view>
                <view style="width: 20vw">
                  <u-button
                    customStyle="margin-top: 20rpx;width: fit-content"
                    type="primary"
                    text="查看测评"
                    size="mini"
                  ></u-button>
                </view>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

<script>
export default {
  name: "peixunxueyuan",
  data() {
    return {};
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    go() {
      uni.navigateTo({
        url: "/pages/answer/allEvaluations",
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .u-line {
  border-bottom: unset !important;
}

::v-deep .u-cell__title-text {
  font-weight: 700;
  font-size: 34rpx;
}

::v-deep .u-cell__body {
  padding: 20rpx 0 !important;
}

::v-deep .u-cell__right-icon-wrap .u-icon__icon {
  font-size: 48rpx !important;
}

::v-deep .u-collapse-item__content__text {
  padding: 0 !important;
}
</style>
